<template>
<div :class="[$style.container]">
  <div class="mr-2">
  </div>
  <div :class="[$style.breadcrumb]">
    <div v-if="!none">
      <el-checkbox :indeterminate="!all && !none" v-model="all"></el-checkbox>
      <span class="ml-2">已选中 {{checkedNum}} 项</span>
    </div>
    <div v-else>
      最近打开
    </div>
  </div>
  <div :class="[$style.actions]">
    <span v-if="none">
      <el-link :underline="false" type="danger" @click="clear()"><i class="el-icon-brush"></i><span>清空浏览记录</span></el-link>
    </span>
    <span v-else>
      <el-link :underline="false" type="danger" @click="remove()"><i class="el-icon-delete"></i><span>移除记录</span></el-link>
    </span>
  </div>
  <div class="mx-3">
    <el-button type="text" icon="el-icon-d-arrow-right" size="small" @click="updateRightExpand(false)" v-if="rightExpand"></el-button>
    <el-button type="text" icon="el-icon-d-arrow-left" size="small" @click="updateRightExpand(true)" v-else></el-button>
  </div>
</div>
</template>

<script lang="ts">

import { Vue, Component, Prop, Emit, Inject, Ref } from 'vue-property-decorator'
import { PageData } from '@/config/page'

@Component
export default class RecentNav extends Vue {
  @Prop(Boolean) leftExpand!: boolean

  @Prop(Boolean) rightExpand!: boolean

  @Prop() data!: PageData<any>

  @Inject() remove!: (row?: any) => void

  @Inject() clear!: () => void

  get all () {
    return this.data.rows.length > 0 && !this.data.rows.some(v => !v.checked)
  }

  set all (value: boolean) {
    this.data.rows.forEach(v => {
      v.checked = value
    })
  }

  get none () {
    return this.data.rows.length < 1 || !this.data.rows.some(v => v.checked)
  }

  get checkedNum () {
    return this.checkedRows.length
  }

  get checkedRows () {
    return this.data.rows.filter(v => v.checked)
  }

  @Emit('update:left-expand') updateLeftExpand (expand: boolean) {}

  @Emit('update:right-expand') updateRightExpand (expand: boolean) {}
}
</script>

<style lang="scss" module>
@import "~@/styles/vars.scss";

.container {
  height: 100%;
  display: flex;
  align-items: center;
}

.breadcrumb {
  flex: 1 1 auto;
}

.actions {
  flex: 0 0 auto;
}
</style>
